<template>
    <div id="shoplist">
        <div class="shop_list">
            <span>全部雪场数量</span><span class="text_1">1253</span><span>个,</span><span>上线票务数量</span><span
                class="text_2">3529423</span><span>个</span>
        </div>
        
            <div class="snow_btn">
                <el-button type="primary" >查询</el-button>
            </div>
        <div class="shop_input">
            <span>省份</span>
            <el-select  placeholder="请选择">
                <el-option v-for="item in 1" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
            </el-select>




        </div>
        <div class="query_shop_1">
            <span>雪场名称</span>
            <el-input class="snow_name" v-model="ipt_name"></el-input>
        </div>
        <div class="query_3">
            <span>产品分类</span>
            <el-select  placeholder="请选择">
                <el-option v-for="item in 1" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
            </el-select>

        </div>
        <div class="query_4">
            <span>产品名称</span>
            <el-select  placeholder="请选择">
                <el-option v-for="item in 1" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
            </el-select>
        </div>
        <div class="query_5">
            <el-input class="snow_name" v-model="ipt_gjz" placeholder="请输入关键字"></el-input>
        </div>
        
        <div class="shop_list_footer">
            <el-table :data="tableData" border style="width: 100%">
                <el-table-column prop="date" label="产品ID号" width="180">
                </el-table-column>
                <el-table-column prop="name" label="产品名称" width="180">
                </el-table-column>
                <el-table-column prop="address" label="所属雪场">
                </el-table-column>
                <el-table-column prop="shoplist" label="已售数量">
                </el-table-column>
                <el-table-column prop="time" label="创建时间">
                </el-table-column>
                <el-table-column prop="putaway" label="上架">
                </el-table-column>
                <el-table-column prop="whether" label="是否可退">
                </el-table-column>
                <el-table-column prop="address" label="操作">
                    
                    <template slot-scope="scope">
                        <el-button @click="handleClick(scope.row)" type="text" size="small">详情</el-button>
                        <el-button type="text" size="small">下架</el-button>
                        <el-button type="text" size="small" ><span class="btn_sc">删除</span></el-button>
                    </template>  
                </el-table-column>
            </el-table>
            <div class="block">
                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                    :current-page.sync="currentPage1" :page-size="100" background layout="total, prev, pager, next"
                    :total="10000">
                </el-pagination>
            </div>
        </div>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                ipt_gjz:"",
                ipt_name:"",
                tableData: [{
                    date: '117',
                    name: '平日成人日常票',
                    address: '河北张家口冰雪大世界',
                    shoplist: "236",
                    time: "2021-08-21 10:52:13",
                    putaway:"上架",
                    whether:"是"
                }, {
                    date: '117',
                    name: '平日成人日常票',
                    address: '河北张家口冰雪大世界',
                    shoplist: "236",
                    time: "2021-08-21 10:52:13",
                    putaway:"上架",
                    whether:"是"
                }, {
                    date: '117',
                    name: '平日成人日常票',
                    address: '河北张家口冰雪大世界',
                    shoplist: "236",
                    time: "2021-08-21 10:52:13",
                    putaway:"上架",
                    whether:"是"
                }, {
                    date: '117',
                    name: '平日成人日常票',
                    address: '河北张家口冰雪大世界',
                    shoplist: "236",
                    time: "2021-08-21 10:52:13",
                    putaway:"上架",
                    whether:"是"
                },
                {
                    date: '117',
                    name: '平日成人日常票',
                    address: '河北张家口冰雪大世界',
                    shoplist: "236",
                    time: "2021-08-21 10:52:13",
                    putaway:"上架",
                    whether:"是"
                }, {
                    date: '117',
                    name: '平日成人日常票',
                    address: '河北张家口冰雪大世界',
                    shoplist: "236",
                    time: "2021-08-21 10:52:13",
                    putaway:"上架",
                    whether:"是"
                }, {
                    date: '117',
                    name: '平日成人日常票',
                    address: '河北张家口冰雪大世界',
                    shoplist: "236",
                    time: "2021-08-21 10:52:13",
                    putaway:"上架",
                    whether:"是"
                }, {
                    date: '117',
                    name: '平日成人日常票',
                    address: '河北张家口冰雪大世界',
                    shoplist: "236",
                    time: "2021-08-21 10:52:13",
                    putaway:"上架",
                    whether:"是"
                }, {
                    date: '117',
                    name: '平日成人日常票',
                    address: '河北张家口冰雪大世界',
                    shoplist: "236",
                    time: "2021-08-21 10:52:13",
                    putaway:"上架",
                    whether:"是"
                },
                ],
                currentPage1: 5,
                currentPage2: 5,
                currentPage3: 5,
                currentPage4: 4
            }
        },
        methods: {
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
            },
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`);
            }
        },
    }
</script>
<style scoped>
.cell {
    text-align: center;
}
 .block {
     position: absolute;
     bottom: 30px;
     left: 530px;
 }
 .snow_footer {
     width: 100%;
     background-color: #fff;
     position: relative;
     top: 50px;
     border-radius: 10px;
     height: 650px;
 }





 .snow_btn {
     position: absolute;
     right: 10px;
     top:62%;
 }
 .nav_hedr {
     width: 100%;
     height: 145px;
     background-color: #fff;
     position: relative;
     top: 20px;
     border-radius: 10px;
 }
 .snow_list {
     width: 1600px;
     height: 40px;
     background-color: #EBF4FF;
     position: absolute;
     left: 25px;
     top: 10px;
     border-radius: 5px;
 }
 .snow_list {
     line-height: 40px;
 }
 .text_1 {
     color: #3D85FF;
     font-size: 20px;
 }
 .text_2 {
     color: #3D85FF;
     font-size: 20px;
 }
 .snow_name {
     display: inline-block;
     width: 200px;
     height: 25px;
 }
 .query {
     position: absolute;
     left: 25px;
     top: 90px;
 }
 .el-input__inner {
     height: 35px;
     margin-left: 5px;
 }
.el-aside {
    background-color: #2A354D;
    color: #F8F9FB;
    /* text-align: center; */
    line-height: 100vh;

}
body, html{
                width: 100%;
                height: 100%;
            }
.el-container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    -ms-flex-preferred-size: auto;
    flex-basis: auto;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    min-width: 0;
    height: 100%;
}
.btn_sc{
    color: red !important;
}




    .shop_list_footer {
        width: 100%;
        background-color: #fff;
        position: relative;
        top: 170px;
        border-radius: 10px;
        height: 650px;
    }

    .query_5 {
        position: absolute;
    left: 72%;
    top: 60%;
    }

    .query_4 {
    position: absolute;
    left: 53%;
    top: 60%;
    }

    .query_3 {
    position: absolute;
    left: 35%;
    top: 60%;
    }

    .query_shop_1 {
    position: absolute;
    left: 17%;
    top: 60%;
       
    }

    .shop_input {
        position: absolute;
    left: 1%;
    top: 60%;
    }

    #shoplist {
        width: 100%;
        height: 145px;
        background-color: #fff;
        position: relative;
        top: 20px;
        border-radius: 10px;
    }

    .shop_list {
        width: 98%;
        height: 40px;
        background-color: #EBF4FF;
        position: absolute;
        left: 1%;
        top: 10px;
        border-radius: 5px;
        line-height: 40px;
    }
    div /deep/ .el-input el-input--suffix{
        position: relative;
    font-size: 14px;
    display: inline-block;
    width: 208px;
    }
</style>